<template>
    <ContentWrapForm>
        <HeaderTitle title="生命线模型管理" content="生命线易损性矩阵维护" />
        <el-row>
            <el-col :span="4">
                <span>生命线类型：</span>
                <el-select v-model="selectList.highwayType" placeholder="请选择" size="large" style="width: 120px">
                    <el-option v-for="item in highwayTypeList" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-col>
            <el-col :span="4">
                <span>区域类型：</span>
                <el-select v-model="selectList.region" placeholder="请选择" size="large" style="width: 120px">
                    <el-option v-for="item in regionList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-col>
            <el-col :span="4">
                <span>烈度：</span>
                <el-select v-model="selectList.intensity" placeholder="请选择" size="large" style="width: 120px" @change="handleIntensityChange" >
                    <el-option v-for="item in intensityList" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-col>
            <el-col :span="24">
                <table class="custom-table">
                    <tbody>
                        <tr class="col-200 ">
                            <td style="font-weight: 700;">设防烈度</td>
                            <td style="font-weight: 700;">基本完好</td>
                            <td style="font-weight: 700;">轻微破环</td>
                            <td style="font-weight: 700;">中等破坏</td>
                            <td style="font-weight: 700;">严重破环</td>
                            <td style="font-weight: 700;">毁坏</td>
                        </tr>
                        <tr class="col-200">
                            <td>6</td>
                            <td v-for='(item,index) in dataList01' >
                                <div class="el-colC">
                                    <el-input type="number" v-model='item.data' :min="0" maxlength="10" />
                                </div>
                            </td>
                        </tr>
                        <tr class="col-200">
                            <td>7</td>
                            <td v-for='(item,index) in dataList02' >
                                <div class="el-colC">
                                    <el-input type="number" v-model='item.data' :min="0" maxlength="10" />
                                </div>
                            </td>
                        </tr>
                        <tr class="col-200">
                            <td>8</td>
                            <td v-for='(item,index) in dataList03' >
                                <div class="el-colC">
                                    <el-input type="number" v-model='item.data' :min="0" maxlength="10" />
                                </div>
                            </td>
                        </tr>
                        <tr class="col-200">
                            <td>9</td>
                            <td v-for='(item,index) in dataList04' >
                                <div class="el-colC">
                                    <el-input type="number" v-model='item.data' :min="0" maxlength="10" />
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </el-col>
        </el-row>
         <el-col class="el-colfoot">
            <el-button type="primary" @click="saveForm">保存</el-button>
        </el-col>
    </ContentWrapForm>
</template>

<script setup>
import { ref } from 'vue'
// 生命线类型
const selectList = ref({
    highwayType:'公路',
    region:'Ⅰ类区',
    intensity:'6'
})
const highwayTypeList = [
    {
        value: 'Option1',
        label: '公路',
    },
    {
        value: 'Option2',
        label: '铁路',
    },
    {
        value: 'Option3',
        label: '桥梁',
    },
    {
        value: 'Option4',
        label: '隧道',
    },
]
// 区域类型
const regionList = [
    {
        value: 'Option1',
        label: 'Ⅰ类区',
    },
    {
        value: 'Option2',
        label: 'Ⅱ类区',
    },
    {
        value: 'Option3',
        label: 'Ⅲ类区',
    },
]
// 烈度
const intensityList = [
    {
        value: '6',
        label: '6',
    },
    {
        value: '7',
        label: '7',
    },
    {
        value: '8',
        label: '8',
    },
    {
        value: '9',
        label: '9',
    },
    {
        value: '10',
        label: '10',
    },
]
// 初始烈度
const dataList01 = ref([
    {
        data:'85'
    },
    {
        data:'15',
    },
    {
        data:'0',
    },
    {
        data:'0',
    },
    {
        data:'0',
    },
])
const dataList02 = ref([
    {
        data:'88'
    },
    {
        data:'12',
    },
    {
        data:'0',
    },
    {
        data:'0',
    },
    {
        data:'0',
    },
])
const dataList03 = ref([
    {
        data:'90'
    },
    {
        data:'10',
    },
    {
        data:'0',
    },
    {
        data:'0',
    },
    {
        data:'0',
    },
])
const dataList04 = ref([
    {
        data:'90'
    },
    {
        data:'10',
    },
    {
        data:'0',
    },
    {
        data:'0',
    },
    {
        data:'0',
    },
])
// 烈度6
const dataList1 = ref([
    {
        data:'85'
    },
    {
        data:'15',
    },
    {
        data:'0',
    },
    {
        data:'0',
    },
    {
        data:'0',
    },
])
const dataList2 = ref([
    {
        data:'88'
    },
    {
        data:'12',
    },
    {
        data:'0',
    },
    {
        data:'0',
    },
    {
        data:'0',
    },
])
const dataList3 = ref([
    {
        data:'90'
    },
    {
        data:'10',
    },
    {
        data:'0',
    },
    {
        data:'0',
    },
    {
        data:'0',
    },
])
const dataList4 = ref([
    {
        data:'90'
    },
    {
        data:'10',
    },
    {
        data:'0',
    },
    {
        data:'0',
    },
    {
        data:'0',
    },
])

// 烈度7
const dataList11 = ref([
    {
        data:'60'
    },
    {
        data:'38',
    },
    {
        data:'2',
    },
    {
        data:'0',
    },
    {
        data:'0',
    },
])
const dataList12 = ref([
    {
        data:'75'
    },
    {
        data:'24',
    },
    {
        data:'1',
    },
    {
        data:'0',
    },
    {
        data:'0',
    },
])
const dataList13 = ref([
    {
        data:'85'
    },
    {
        data:'14',
    },
    {
        data:'1',
    },
    {
        data:'0',
    },
    {
        data:'0',
    },
])
const dataList14 = ref([
    {
        data:'85'
    },
    {
        data:'14',
    },
    {
        data:'1',
    },
    {
        data:'0',
    },
    {
        data:'0',
    },
])

// 烈度8
const dataList21 = ref([
    {
        data:'40'
    },
    {
        data:'36',
    },
    {
        data:'21',
    },
    {
        data:'2.5',
    },
    {
        data:'0.5',
    },
])
const dataList22 = ref([
    {
        data:'55'
    },
    {
        data:'33',
    },
    {
        data:'10',
    },
    {
        data:'1.8',
    },
    {
        data:'0.2',
    },
])
const dataList23 = ref([
    {
        data:'70'
    },
    {
        data:'25',
    },
    {
        data:'5',
    },
    {
        data:'0',
    },
    {
        data:'0',
    },
])
const dataList24 = ref([
    {
        data:'70'
    },
    {
        data:'25',
    },
    {
        data:'5',
    },
    {
        data:'0',
    },
    {
        data:'0',
    },
])

// 烈度9
const dataList31 = ref([
    {
        data:'20'
    },
    {
        data:'37',
    },
    {
        data:'28',
    },
    {
        data:'12.5',
    },
    {
        data:'2.5',
    },
])
const dataList32 = ref([
    {
        data:'35'
    },
    {
        data:'30',
    },
    {
        data:'25',
    },
    {
        data:'8.5',
    },
    {
        data:'1.5',
    },
])
const dataList33 = ref([
    {
        data:'50'
    },
    {
        data:'31',
    },
    {
        data:'14',
    },
    {
        data:'5',
    },
    {
        data:'0',
    },
])
const dataList34 = ref([
    {
        data:'50'
    },
    {
        data:'31',
    },
    {
        data:'14',
    },
    {
        data:'5',
    },
    {
        data:'0',
    },
])

// 烈度10
const dataList41 = ref([
    {
        data:'10'
    },
    {
        data:'15',
    },
    {
        data:'40.5',
    },
    {
        data:'25',
    },
    {
        data:'9.5',
    },
])
const dataList42 = ref([
    {
        data:'15'
    },
    {
        data:'25',
    },
    {
        data:'36.5',
    },
    {
        data:'16',
    },
    {
        data:'7.5',
    },
])
const dataList43 = ref([
    {
        data:'20'
    },
    {
        data:'30',
    },
    {
        data:'35.5',
    },
    {
        data:'10',
    },
    {
        data:'4.5',
    },
])
const dataList44 = ref([
    {
        data:'20'
    },
    {
        data:'30',
    },
    {
        data:'35',
    },
    {
        data:'12.5',
    },
    {
        data:'2.5',
    },
])

const handleIntensityChange = (value) => {
  if (value == 6) {
    dataList01.value = dataList1.value
    dataList02.value = dataList2.value
    dataList03.value = dataList3.value 
    dataList04.value = dataList4.value 
  }
  if (value == 7) {
    dataList01.value = dataList11.value 
    dataList02.value = dataList12.value 
    dataList03.value = dataList13.value 
    dataList04.value = dataList14.value 
  }
  if (value == 8) {
    dataList01.value = dataList21.value 
    dataList02.value = dataList22.value 
    dataList03.value = dataList23.value 
    dataList04.value = dataList24.value 
  }
  if (value == 9) {
    dataList01.value = dataList31.value 
    dataList02.value = dataList32.value 
    dataList03.value = dataList33.value 
    dataList04.value = dataList34.value 
  }
  if (value == 10) {
    dataList01.value = dataList41.value 
    dataList02.value = dataList42.value 
    dataList03.value = dataList43.value 
    dataList04.value = dataList44.value 
  }
}

const saveForm = () => {
    ElMessage({
        message: '保存成功！',
        type: 'success',
    })
}


</script>

<style lang="scss" scoped>
.flex {
    display: flex;
    align-items: center;
}
.custom-table {
    width: 60%;
    border-collapse: collapse;
    margin-top: 20px;
    table-layout: fixed; /* 添加此行以设置固定列宽 */
    /* 合并表格边框 */
}

.custom-table td {
    border: 1px solid #b3b3b3;
    /* 添加边框（可选） */
    padding: 8px;
    /* 添加内边距（可选） */
}


.col-200 {
    font-size: 16px;
    color: #333;
    text-align: center;
    /* 设置列宽为30% */
}

.el-colC {
    border: 1px solid #333333;
    text-align: center;
    margin: 0 2px;
}
</style>